<script setup>
import { onMounted, ref } from 'vue'
import { getProjectListApi } from '@/api/project.js'
import {
  deleteVersionApi,
  getVersionListApi,
  saveVersionApi,
  updateVersionApi
} from '@/api/version.js'
import { ElMessage } from 'element-plus'

const defalutFrom = {
  projectId: '',
  projectName: '',
  versionNumber: '',
  releaseDate: '',
  description: '',
  id: ''
}
const form = ref()
const version = ref(defalutFrom)

// 重置表单
const resetForm = () => {
  version.value = { ...defalutFrom }
}
// 列表
const list = ref([])
//分页
const total = ref(0)
const pageParams = ref({
  page: 1,
  limit: 10
})
const queryDto = ref({
  keyword: ''
})
// 查询列表接口
const fetchData = async () => {
  const response = await getVersionListApi(
    pageParams.value.page,
    pageParams.value.limit,
    queryDto.value
  )
  total.value = response.data.total
  list.value = response.data.records
}
onMounted(() => {
  fetchData()
})
// 新增
const dialogVisible = ref(false)
const addShow = () => {
  fetchProjectOptions()
  dialogVisible.value = true
  resetForm()
}

const projectOptions = ref([])

//拿到项目列表
const fetchProjectOptions = async () => {
  const response = await getProjectListApi(1, 1000, null)
  projectOptions.value = response.data.records
}
//当更改项目名称后同步更新项目id
const handleChange = (item) => {
  version.value.projectId = item.id
}

const submit = async () => {
  // 触发表单校验
  await form.value.validate()
  // 如果表单校验通过，执行提交逻辑
  if (!version.value.id) {
    await saveVersionApi(version.value)
    ElMessage.success('新增成功')
  } else {
    await updateVersionApi(version.value)
    ElMessage.success('编辑成功')
  }

  dialogVisible.value = false

  fetchData()
}

// 编辑
const editShow = (row) => {
  fetchProjectOptions()
  version.value = { ...row }
  dialogVisible.value = true
}

// 删除
const deleteVersion = async (row) => {
  await deleteVersionApi(row.id)
  ElMessage.success('删除成功')
  fetchData()
  resetForm()
}
</script>

<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>
  <el-dialog v-model="dialogVisible" title="添加或修改" width="40%">
    <el-form :model="version" :rules="rules" ref="form" label-width="120px">
      <el-form-item
        label="所属项目"
        prop="projectName"
        :rules="[{ required: true, message: '请选择项目', trigger: 'change' }]"
      >
        <el-select v-model="version.projectName" placeholder="选择项目">
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectName"
            :value="item.projectName"
            @mouseleave="handleChange(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="版本号"
        prop="versionNumber"
        :rules="[{ required: true, message: '请输入版本号', trigger: 'blur' }]"
      >
        <el-input v-model="version.versionNumber" />
      </el-form-item>
      <el-form-item
        label="发布日期"
        prop="releaseDate"
        :rules="[
          { required: true, message: '请选择发布日期', trigger: 'change' }
        ]"
      >
        <el-date-picker
          v-model="version.releaseDate"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="version.description"
          type="textarea"
          :rows="4"
          placeholder="请输入描述"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!---数据表格-->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="projectName" label="项目名称" />
    <el-table-column prop="versionNumber" label="版本号" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="releaseDate" label="发布时间" />
    <el-table-column label="操作" align="center" width="280" #default="scope">
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="deleteVersion(scope.row)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    @size-change="fetchData"
    @current-change="fetchData"
  />
</template>

<style scoped></style>
